<template>
	<view class="box">
		<!-- 头像 标题 -->
		<view class="header">
			<view class="header-left">
				<image class="header-image" src="/static/icon/touxiang2(3).png"></image>
			</view>
			<text class="header-text">社区</text>
			<view class="right-image">
				<image class="header-image1" src="/static/icon/daohangtubiao2(3).png"></image>
				<image class="header-image1" src="/static/icon/daohangtubiao(3).png"></image>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="ss">
			<input class="search" placeholder="搜索相关内容">
			<image class="search-image" src="https://z3.ax1x.com/2021/05/07/g1BS9H.png"></image>
		</view>

		<!-- 内容 -->
		<view class="content">
			<view class="top-tabbar">
				<view class="tabbar-itme" :class="{active : index== currentTab}" v-for="( item, index) in current" :key="item" @tap="swioerChange(index)">{{item}}</view>
			</view>
			<!-- 面板切换 -->
			<swiper class="swiper" @change="changeTab" :current="currentTab">
				<swiper-item>
					<view class="swiper-item">1</view>
				</swiper-item>

				<swiper-item>
					<view class="swiper-item">
						
						<!-- 固定浮窗 -->
						<view class="fuchuang">
							<image src="/static/icon/fabu(3).png" class="fuchuang-img"></image>
						</view>
						
						
						<!-- 照片 -->
						<view>
							<scroll-view scroll-x="true" :show-scrollbar='true' class="pic" style="white-space:nowrap;">
								<view class="img_wrapper">
									<image class="swiper-icon" src="/static/icon/cipiantu(3).png" />


									<image class="image" src="/static/icon/cipiantu(3).png">
										<text class="swiper-text">
											开工见面礼
										</text>
									</image>
									<text class="swiper-text2">牛年开工大吉领红包</text>
									<text class="swiper-text3">晒实盘 红包再翻倍</text>
									<button class="button">立即参与</button>


									<image class="swiper-icon2" src="/static/icon/cipiantu2(3).png" />
									<image class="image1" src="/static/icon/cipiantu2(3).png">
										<text class="swiper-text1">
											开工见面礼
										</text>
									</image>
									<text class="swiper-text2-1">牛年开工大吉领红包</text>
									<text class="swiper-text3-1">晒实盘 红包再翻倍</text>
									<button class="button1">立即参与</button>


								</view>
							</scroll-view>
						</view>

						<!-- 评论区 -->
						<view class="comment">

							<view class="comment-top">
								<view class="">
									<view class="top-img">
										<image class="topimage" src="/static/icon/touxiang(3).png"></image>
									</view>
									<view class="bbb" style="float: left;">
										<view class="ddd" style="display: flex; padding-top: 10rpx;">
											<view class="top-text1-left">迪迦奥特曼</view>
											<view class="top-text1-right">
												财龄1年
											</view>
										</view>
										<view class="top-text2">04-10 16:46:33</view>
									</view>
								</view>
								<view class="right">
									<text class="comment-right-text">关注</text>
									<image class="comment-right-image" src="/static/icon/guanzhu(3).png"></image>
								</view>
							</view>

							<view class="content-text">春节后基金连续下跌2日，还好有稳固收益呀！</view>
							
							<view class="wenzi">
								<view class="">#实盘秀#</view>
								<view class="wenzi1">#投资心得#</view>
								<view class="wenzi1">#牛年买牛基#</view>
							</view>
							
							<view class="tupian">
								<view class="tupian-img">
									<image class="tupian-img" src="/static/icon/tupian(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian2(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian3(3).png" ></image>
								</view>
							</view>
							
							<view class="shuju">
								<image class="shuju-img" src="/static/icon/dongtaitubiao(3).png" ></image>
								<text class="shuju-text1">景顺长城鼎益混合型证...</text>
								<text class="shuju-text2">+21.18%</text>
							</view>
							
							<view class="dianzan">
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/fenxiang(3).png" ></image>
									<text class="dianzan-tex">分享</text>
								</view>
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/pinglun(3).png" ></image>
									<text class="dianzan-tex">8560</text>
								</view>
								<view class="dianzan-1-1">
									<image class="dianzan-img" src="/static/icon/dianzan(3).png" ></image>
									<text class="dianzan-tex">999</text>
								</view>
							</view>
						</view>
						
						<!-- 评论区 -->
						<view class="comment">
						
							<view class="comment-top">
								<view class="">
									<view class="top-img">
										<image class="topimage" src="/static/icon/touxiang(3).png"></image>
									</view>
									<view class="bbb" style="float: left;">
										<view class="ddd" style="display: flex; padding-top: 10rpx;">
											<view class="top-text1-left">迪迦奥特曼</view>
											<view class="top-text1-right">
												财龄1年
											</view>
										</view>
										<view class="top-text2">04-10 16:46:33</view>
									</view>
								</view>
								<view class="right">
									<text class="comment-right-text">关注</text>
									<image class="comment-right-image" src="/static/icon/guanzhu(3).png"></image>
								</view>
							</view>
						
							<view class="content-text">春节后基金连续下跌2日，还好有稳固收益呀！</view>
							
							<view class="wenzi">
								<view class="">#实盘秀#</view>
								<view class="wenzi1">#投资心得#</view>
								<view class="wenzi1">#牛年买牛基#</view>
							</view>
							
							<view class="tupian">
								<view class="tupian-img">
									<image class="tupian-img" src="/static/icon/tupian(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian2(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian3(3).png" ></image>
								</view>
							</view>
							
							<view class="shuju">
								<image class="shuju-img" src="/static/icon/dongtaitubiao(3).png" ></image>
								<text class="shuju-text1">景顺长城鼎益混合型证...</text>
								<text class="shuju-text2">+21.18%</text>
							</view>
							
							<view class="dianzan">
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/fenxiang(3).png" ></image>
									<text class="dianzan-tex">分享</text>
								</view>
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/pinglun(3).png" ></image>
									<text class="dianzan-tex">8560</text>
								</view>
								<view class="dianzan-1-1">
									<image class="dianzan-img" src="/static/icon/dianzan(3).png" ></image>
									<text class="dianzan-tex">999</text>
								</view>
							</view>
						</view>
						
						<view class="youqu">
							<view class="youqu-top">
								<view class="huotui"></view>
								<text class="huotui-tex">帮你发现更有趣的人</text>
							</view>
							<view class="xxx">
								<view class="ren">
									<image class="ren-img" src="/static/icon/touxiang7(3).png"></image>
									<view class="ren-1-1">倪哥</view>
									<view class="ren-2-2">非知名财经分析</view>
									<button class="ren-btn">+关注</button>
								</view>
								<view class="ren">
									<image  class="ren-img" src="/static/icon/touxiang6(3).png"></image>
									<view class="ren-1-1">赛文奥特曼</view>
									<view class="ren-2-2">推荐给你专业的他</view>
									<button class="ren-btn" >+关注</button>
								</view>
								<view class="ren">
									<image  class="ren-img" src="/static/icon/touxiang5(3).png"></image>
									<view class="ren-1-1">迪迦奥特曼</view>
									<view class="ren-2-2">文案策划</view>
									<button class="ren-btn">+关注</button>
								</view>
							</view>
						</view>
						
						<!-- 评论区 -->
						<view class="comment">
						
							<view class="comment-top">
								<view class="">
									<view class="top-img">
										<image class="topimage" src="/static/icon/touxiang(3).png"></image>
									</view>
									<view class="bbb" style="float: left;">
										<view class="ddd" style="display: flex; padding-top: 10rpx;">
											<view class="top-text1-left">迪迦奥特曼</view>
											<view class="top-text1-right">
												财龄1年
											</view>
										</view>
										<view class="top-text2">04-10 16:46:33</view>
									</view>
								</view>
								<view class="right">
									<text class="comment-right-text">关注</text>
									<image class="comment-right-image" src="/static/icon/guanzhu(3).png"></image>
								</view>
							</view>
						
							<view class="content-text">春节后基金连续下跌2日，还好有稳固收益呀！</view>
							
							<view class="wenzi">
								<view class="">#实盘秀#</view>
								<view class="wenzi1">#投资心得#</view>
								<view class="wenzi1">#牛年买牛基#</view>
							</view>
							
							<view class="tupian">
								<view class="tupian-img">
									<image class="tupian-img" src="/static/icon/tupian(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian2(3).png" ></image>
								</view>
								<view class="tupian-img">
									<image class="tupian-img"  src="/static/icon/tupian3(3).png" ></image>
								</view>
							</view>
							
							<view class="shuju">
								<image class="shuju-img" src="/static/icon/dongtaitubiao(3).png" ></image>
								<text class="shuju-text1">景顺长城鼎益混合型证...</text>
								<text class="shuju-text2">+21.18%</text>
							</view>
							
							<view class="dianzan">
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/fenxiang(3).png" ></image>
									<text class="dianzan-tex">分享</text>
								</view>
								<view class="dianzan-1">
									<image class="dianzan-img" src="/static/icon/pinglun(3).png" ></image>
									<text class="dianzan-tex">8560</text>
								</view>
								<view class="dianzan-1-1">
									<image class="dianzan-img" src="/static/icon/dianzan(3).png" ></image>
									<text class="dianzan-tex">999</text>
								</view>
							</view>
						</view>
						
						<view class="jiazai">
							加载更多...
						</view>
						
					</view>
				</swiper-item>


				<swiper-item>
					<view class="swiper-item">3</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">4</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">5</view>
				</swiper-item>
			</swiper>


		</view>
	</view>
</template>

<script>
	import apis from '../../api/apis.js'
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"find"
	);
	export default {
		data() {
			return {
				current: ['关注', '推荐', '全职', '视频', '直播'],
				currentTab: 1,
			}
		},
		methods: {
			changeTab(e) {
				this.currentTab = e.detail.current
			},
			swioerChange(index) {
				this.currentTab = index
			}
		}
	}
</script>

<style>
	.box {
		width: 750rpx;
		background-color: #3476f1;
		;
	}

	.header {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 700rpx;
		margin: 0 auto;
		padding-bottom: 20rpx;
	}



	.header-image {
		width: 74rpx;
		height: 74rpx;
		line-height: 100rpx;
	}

	.header-text {
		width: 100rpx;
		text-align: center;
		line-height: 90rpx;
		padding-left: 50rpx;
		color: #FFFFFF;
		font-size: 42rpx;
		font-weight: 600;
	}

	.right-image {
		width: 120rpx;
		display: flex;
		justify-content: space-between;
	}

	.header-image1 {
		width: 50rpx;
		height: 50rpx;
		float: right;
		line-height: 90rpx;
	}

	.ss {
		width: 700rpx;
		height: 60rpx;
		position: relative;
		margin: 0 auto;
	}

	.search {
		width: 700rpx;
		height: 60rpx;
		color: #b7b7b7;
		background-color: #FFFFFF;
		border-top-left-radius: 46rpx;
		border-bottom-left-radius: 46rpx;
		border-top-right-radius: 46rpx;
		border-bottom-right-radius: 46rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.search-image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 230rpx;
		bottom: 16rpx;
		z-index: 11;
	}

	.content {
		/* height: 3492rpx; */
		background-color: #FFFFFF;
		margin-top: 30rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 14rpx;
	}

	.top-tabbar {
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tabbar-itme {
		width: 118rpx;
		height: 50rpx;
		line-height: 50rpx;
		flex-grow: 1;
		text-align: center;
		color: #999999;
		font-size: 28rpx;
		border-radius: 10rpx;
	}

	.active {
		background-color: #3476F1;
		color: #FFFFFF;
	}

	.swiper {
		margin-top: 10rpx;
		height: 3020rpx;
		
	}
	
	.fuchuang{
		width: 150rpx;
		height: 150rpx;
		position: fixed;
		display: block;
		z-index: 9999;
		left:80%;
		top:95%;
	}
	.fuchuang-img{
		width: 150rpx;
		height: 150rpx;
		position: relative;
	}
	.pic {
		margin: 14rpx;
	}

	.img_wrapper {
		position: relative;
	}

	.swiper-icon {
		width: 482rpx;
		height: 248rpx;

	}


	.image {
		position: absolute;
		width: 22rpx;
		height: 22rpx;
		line-height: 22rpx;
		left: 24rpx;
		top: 24rpx;

	}

	.swiper-text {
		width: 100rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: #BE7F22;
		opacity: 1;
		left: 55rpx;
		top: 22rpx;
		text-align: center;
		position: absolute;
	}

	.swiper-text2 {
		width: 252rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		text-align: center;
		position: absolute;
		left: 24rpx;
		top: 76rpx;
	}

	.swiper-text3 {
		width: 200rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
		text-align: center;
		position: absolute;
		left: 24rpx;
		top: 120rpx;
	}

	.button {
		width: 168rpx;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #BE7F22;
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
		opacity: 1;
		border-radius: 28rpx;
		text-align: center;
		position: absolute;
		left: 24rpx;
		top: 172rpx;
	}


	.swiper-icon2 {
		width: 482rpx;
		height: 248rpx;
		padding-left: 20rpx;
	}

	.image1 {
		position: absolute;
		width: 22rpx;
		height: 22rpx;
		line-height: 22rpx;
		left: 530rpx;
		top: 24rpx;

	}

	.swiper-text1 {
		width: 100rpx;
		height: 28rpx;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 28rpx;
		color: #53b6c8;
		opacity: 1;
		left: 560rpx;
		top: 22rpx;
		text-align: center;
		position: absolute;
	}

	.swiper-text2-1 {
		width: 252rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		text-align: center;
		position: absolute;
		left: 530rpx;
		top: 76rpx;
	}

	.swiper-text3-1 {
		width: 200rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #333333;
		opacity: 1;
		text-align: center;
		position: absolute;
		left: 530rpx;
		top: 120rpx;
	}

	.button1 {
		width: 168rpx;
		height: 52rpx;
		line-height: 52rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #53b6c8;
		box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);
		opacity: 1;
		border-radius: 28rpx;
		text-align: center;
		position: absolute;
		left: 530rpx;
		top: 172rpx;
	}



	.comment {
		margin: 40rpx 14rpx 14rpx 14rpx;
		padding: 24rpx;
		height: 660rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		box-shadow: #cccccc 0rpx 0rpx 20rpx 0rpx;
	}

	.comment-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-img {
		width: 72rpx;
		height: 72rpx;
		border: 4rpx solid #CCCCCC;
		border-radius: 50%;
		float: left;
	}

	.topimage {
		width: 72rpx;
		height: 72rpx;
	}


	.top-text1-left {
		font-size: 30rpx;
		color: #333333 bold;
		font-weight: 500;
		padding-left: 10rpx;
	}

	.top-text1-right {
		height: 38rpx;
		line-height: 38rpx;
		background-color: #fcf5ec;
		font-size: 22rpx;
		color: #c68e3c;
		text-align: center;
		margin-left: 10rpx;

	}

	.top-text2 {
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}


	.right {
		width: 112rpx;
		height: 48rpx;
		border-radius: 4rpx;
		border: 1rpx solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: space-around;
		float: right;
		line-height: 48rpx;
	}

	.comment-right-text {
		line-height: 48rpx;
		font-size: 24rpx;
		color: #3476f1;
		padding-left: 10rpx;
	}


	.comment-right-image {
		width: 28rpx;
		height: 28rpx;
		padding-right: 10rpx;
	}
	
	.content-text{
		font-size: 28rpx;
		color: #333333;
		line-height: 44rpx;
		padding-top: 24rpx;
	}
	.wenzi{
		font-size: 24rpx;
		color: #3476f1;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		display: flex;
	}
	.wenzi1{
		padding-left: 20rpx;
	}

	.tupian{
		display: flex;
		justify-content: space-between;
	}

	.tupian-img{
		width: 204rpx;
		height: 272rpx;
		border: 2rpx solid #EBEBEB;
		opacity: 1;
		border-radius: 8RPX;
	}

	.shuju{
		width: 406rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 16rpx;
		display: flex;
		align-items: center;
		background-color: #eaf1fe;
		margin-top: 20rpx;
		border-top-left-radius: 46rpx;
		border-bottom-left-radius: 46rpx;
		border-top-right-radius: 46rpx;
		border-bottom-right-radius: 46rpx;
	}

	.shuju-img{
		width: 30rpx;
		height: 30rpx;
	}
	.shuju-text1{
		font-size: 24rpx;
		color: #333333;
		padding-left: 10rpx;
	}
	.shuju-text2{
		font-size: 24rpx;
		color: #f85656;
		padding-left: 4rpx;
	}


	.dianzan{
		height: 60rpx;
		margin-top: 18rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.dianzan-1{
		width: 235rpx;
		border-right: 2rpx solid #999999;
		text-align: center;
	}
	.dianzan-1-1{
		width: 235rpx;

		text-align: center;
	}
	.dianzan-img{
		width: 20rpx;
		height: 20rpx;
		opacity: 1;
	}
	.dianzan-tex{
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}
	
	.youqu{
		margin: 40rpx 14rpx 14rpx 14rpx;
	}
	.youqu-top{
		display: flex;
		align-items: center;
	}
	
	.huotui{
		width: 8rpx;
		height: 30rpx;
		background-color: #3476f1;
		opacity: 1;
		border-radius: 6rpx;
	}
	.huotui-tex{
		padding-left: 10rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.xxx{
		margin-top: 25rpx;
		/* border: 1rpx solid red; */
		display: flex;
		justify-content: space-between;
	}
	.ren{
		width: 220rpx;
		height: 320rpx;
		
		
		text-align: center;
		border-radius: 4rpx;
		background-color: #FFFFFF;
		box-shadow: #cccccc 0rpx 0rpx 12rpx 0rpx;
		
	}
	.ren-img{
		width: 108rpx;
		height: 108rpx;
		padding-top: 24rpx;
	}
	.ren-1-1{
		padding-top: 10rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}
	.ren-2-2{
		padding-top: 5rpx;
		font-size: 24rpx;
		color: #999999;
		
	}
	
	.ren-btn{
		width: 142rpx;
		height: 52rpx;
		line-height: 52rpx;
		margin-top: 13rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #3476f1;
		border-radius: 8rpx;
	}
	
	.jiazai{
		padding-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
</style>
